import { inject, observer } from "mobx-react";
import React from "react";
import { ImageBackground, Keyboard, ScrollView, StyleSheet, TextInput } from "react-native";
import { Button,Text, TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../configs/commonStyle";
import api from "../net/api";
import { IconImage } from "../utils";
import BasePage from "./BasePage";
import { windowWidth } from "../configs/platform";
import NavigationBar from "./common/NavigationBar";
import ViewUtils from "../utils/ViewUtils";
import { Icon } from "./components";
import ToastUtils from "../utils/ToastUtils";

/**
 * 重置密码
 */
@inject('userStore', 'appStore')
@observer
export default class ResetPwd extends BasePage {
    constructor(props) {
        super(props);
        this.state = {
            password: GLOBAL.__DEV__ ? "123456" : "",
            confirmPassword: GLOBAL.__DEV__ ? "123456" : "",
        };
    }

    onPost = () => {
        Keyboard.dismiss();
        const {password, confirmPassword} = this.state;
        const { phone } = this.props.navigation.state.params;

        if (IsNullOrEmpty(password)) {
            ToastUtils.showFailInfo('请输入密码');
            return;
        }
        if (password.length < 6) {
            ToastUtils.showFailInfo('密码至少6位数');
            return;
        }

        if (IsNullOrEmpty(confirmPassword)) {
            ToastUtils.showFailInfo('请输入确认密码');
            return;
        }

        if (this.state.password !== this.state.confirmPassword) {
            ToastUtils.showFailInfo('请输入一样的密码');
            return;
        }

        axios.post(api.findPwd, {
            phone:phone,
            newPwd:password,
            confirmPwd:confirmPassword,
            showLoading: true,
        }).then(res => {
            ToastUtils.showInfo('重置密码成功');
            this.props.userStore.logout()
        }).catch(e => {
            e.msg && ToastUtils.showFailInfo(e.msg)
        });
    };

    render() {
        return (
          <View style={commonStyles.body}>
                {/*<ImageBackground source={IconImage.bg_login} style={styles.bg_login}/>*/}
                <View useSafeArea style={StyleSheet.absoluteFill} pointerEvents={"box-none"}>
                    <ScrollView keyboardShouldPersistTaps={'always'}>
                    <View flex style={styles.LoginForm}>

                        <View row centerV marginB-20 marginH-20>
                            <Text style={commonStyles.text_primary_28}>欢迎登录智慧食安</Text>
                        </View>
                        <View marginH-20>
                            <View>
                                <Text style={commonStyles.text_primary_18}>设置新密码</Text>
                            </View>
                        </View>
                        <View flex marginH-20 marginT-50>
                                <View style={{...styles.inputView}}>
                                    <View row centerV height={48}>
                                        <TextInput placeholderTextColor='#959595'
                                                   style={{...styles.inputStyle}}
                                                   placeholder="请输入新密码"
                                                   autoCapitalize="none"
                                                   maxLength={11}
                                                   secureTextEntry
                                                   defaultValue={this.state.password}
                                                   onChangeText={value => this.setState({password: value})}/>
                                        {
                                            this.state.password ?
                                                <TouchableOpacity paddingV-10 paddingL-10 onPress={() => {
                                                    this.setState({
                                                        password: '',
                                                    });
                                                }}>
                                                    <Icon type="AntDesign" name={'closecircle'} size={19} color={'#BCBCBC'} />
                                                </TouchableOpacity> : null
                                        }
                                    </View>
                                </View>

                                <View style={{...styles.inputView}}>
                                    <View row centerV height={48}>
                                        <TextInput placeholderTextColor='#959595'
                                                   style={{...styles.inputStyle}}
                                                   placeholder="请再次输入新密码"
                                                   defaultValue={this.state.confirmPassword}
                                                   secureTextEntry
                                                   onChangeText={value => this.setState({confirmPassword: value})}/>

                                        {
                                            this.state.confirmPassword ?
                                                <TouchableOpacity paddingV-10 paddingL-10 onPress={() => {
                                                    this.setState({
                                                        confirmPassword: '',
                                                    });
                                                }}>
                                                    <Icon type="AntDesign" name={'closecircle'} size={19} color={'#BCBCBC'} />
                                                </TouchableOpacity> : null
                                        }
                                    </View>
                                </View>

                            <Button label={'设置密码'} marginV-50 bg-primary labelStyle={{fontSize: 18}} onPress={this.onPost}/>
                        </View>

                    </View>
                    </ScrollView>
                </View>
                <View useSafeArea style={StyleSheet.absoluteFill} pointerEvents={"box-none"}>
                    <NavigationBar
                        backgroundColor={'transparent'}
                        leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
                        title={''}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bg_login: {
        width: '100%',
        height: '100%',
    },
    LoginForm: {
        marginTop: 70,
        backgroundColor: 'white',
        borderRadius: 10,
        marginHorizontal: 15,
        paddingTop: 20,
        marginBottom: 30,
    },
    inputView: {
        backgroundColor: '#F7F7F7',
        width: '100%',
        marginTop: 15,
        borderRadius: 10,
        borderWidth: 0.5,
        borderColor: '#0000000F',
        paddingHorizontal: 15,
    },
    bg_line: {
        backgroundColor: '#FED13F',
        width: 80,
        height: 12,
        position: 'absolute',
        bottom: 0,
        right: -4,
        zIndex: -10,
    },
    btn_login: {
        width: (windowWidth - 70),
        height: (windowWidth - 70) * 94 / 622,
        alignSelf: "center",
        ...commonStyles.center,
    },
    appIcon: {
        width: 109,
        height: 109,
        position: 'absolute',
        bottom: -40,
    },

    iconSmall: {
        width: 24,
        height: 24,
        marginRight: 14,
    },

    inputStyle: {
        color: '#333333',
        fontSize: 14,
        flex: 1,
        paddingHorizontal: 0,
    },

    line: {
        backgroundColor: '#FF006C',
        width: 3,
        borderRadius: 2,
        height: 15,
        marginRight: 5,
    },
    countButton: {
        width: 86,
        height: 29,
        backgroundColor:'#427FFE',
        borderRadius:16,
    },
    protocol: {marginTop: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'},
    subtitle:{
        borderRadius:4,
        borderWidth: 0.5,
        borderColor: '#C1C1C1',
        flexDirection: 'row',
        marginTop:10,
        alignItems:'center',
        paddingHorizontal:10,
        paddingVertical:10,
    }
});

